<template>
	<div >
		<div @click='isChangeShowFalse'>
			<h1>BiliBili监控系统</h1>
			<div class="item-box" v-for='(item,index) of dataList' :key=item.video_id>
				<a class="item-title" v-html='item.title' :href="item.arcurl"></a>
				<p>ID:{{item.video_id}}</p>
				<p>播放数:{{item.play}} 阀值：{{item.max_play}}</p>
				<p>关键词:{{item.keyword}}</p>
				<p>发布日期:{{item.pubdate}}</p>
				<p>监控时间:{{item.start_time}}————{{item.end_time}}</p>
				<button class="btn detail" @click='deleteVideo(item.video_id)'>删除</button>
				<button class="btn" @click.stop ='isChangebtn(item.video_id)'>更新</button>
			</div>
			 <ul class="pagination" >
			 	<li v-show="current != 1" @click='goto(1)'><a href="javascript:;">首页</a></li>
	            <li v-show="current != 1" @click="current-- && goto(current--)" ><a href="javascript:;">上一页</a></li>
	            <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
	              <a href="javascript:;" >{{index}}</a>
	            </li>
	            <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="javascript:;" >下一页</a></li>
	            <li  v-show="allpage != current" @click='goto(allpage)'><a href="javascript:;">尾页</a></li>
	        </ul>
		</div>
        <div class="gengxin" v-if='isChangeShow' >
        	<input type="text" v-model='changeMaxPlay'  placeholder="输入阀值" class="ipt">
        	<br>
        	<datePicker type="date"  placeholder="截止时间" v-model='changeTime' class='date-picker' ></DatePicker>
        	<br>
        	<button class="btn" @click='changeVieoData'>更新</button>
        </div>
			<transition name="fade">
				<msg v-show='show' class='msg' :class="{succ:isSucc}">{{msg}}</msg>
			</transition>
	</div>
</template>
<script>
    import {getVideo,deleteVideo,changeVieoData,changeTime} from '@/api/ajax.js'
    import {DatePicker} from 'iview';
    import Msg from '@/pages/msg'
	export default {
		data(){
			return {
				token:'',
				tdList:['视频标题','播放量','关键词'],
				dataList:[],
				current:1,
				showItem:5,
				allpage:1,
				setTime:'2018-07-29 00:00:00',
				maxPlay:5000,
				changeTime:'2018-07-29 00:00:00',
				changeID:0,
				changeMaxPlay:1,
				isChangeShow:false,
				msg:'',
				isSucc:true,
				show:false
			}
		},
		components:{
			DatePicker,
			Msg
		},
		computed:{
		  pages:function(){
		        var pag = [];
		          if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
		               //总页数和要显示的条数那个大就显示多少条
		               var i = Math.min(this.showItem,this.allpage);
		               while(i){
		                   pag.unshift(i--);
		               }
		           }else{ //当前页数大于显示页数了
		               var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
		                   i = this.showItem;
		               if( middle >  (this.allpage - this.showItem)  ){
		                   middle = (this.allpage - this.showItem) + 1
		               }
		               while(i--){
		                   pag.push( middle++ );
		               }
		           }
		         return pag
		       }
		},
		created(){
	    	this.token =  sessionStorage.getItem('token')
			this.getData()
		},
		methods:{
			getData(index){
				const that = this
				getVideo(index||1,this.token,function(res){
					const _data = res.data
					if(_data.code==0){
						that.$emit('navList',1)
						that.allpage = _data.pages
						that.dataList = _data.data
					}
				})
			},
			deleteVideo(id){
				const that = this 
				deleteVideo(id,this.token,function(res){
					that.getData(that.current)
				})
			},
			isChangebtn(id){
				this.changeID = id
				this.isChangeShow=true
			},
			isChangeShowFalse(){
				this.isChangeShow=false
			},
			changeVieoData(){
				const that = this
				const dateS = this.changeDateStr(this.changeTime)	
				changeTime(that.token,that.changeID,that.changeMaxPlay,dateS,function(res){
					that.msgs(res.data.message,'ok')
					that.changeID=0
					that.changeMaxPlay=1
					that.changeTime='2018-07-29 00:00:00'
					that.isChangeShow=false
					that.getData(that.current)
				})
			},
	        goto:function(index){
	          if(index == this.current) return;
	            this.current = index;
	            this.getData(index)
	            //这里可以发送ajax请求
	        },
			changeDateStr(dateV){
				let date_value=dateV.getFullYear() + '-' + (dateV.getMonth() + 1) + '-' + dateV.getDate() + ' ' + dateV.getHours() + ':' + dateV.getMinutes() + ':' + dateV.getSeconds()
				let dateS = Date.parse(new Date(date_value)).toString();
				dateS = dateS.substr(0,10)
				return dateS			
			},
			msgs(key,value,fn){
				const that = this
				if(key==value){
					that.msg = '成功啦ovo'
					that.show = true
					that.isSucc = true
					if(fn){
						fn()
					}
					setTimeout(()=>{
						that.msg = ''
						that.show = false
					},1500)
				}else{
					that.msg = '失败惹QAQ！'
					that.show = true
					that.isSucc = false
					setTimeout(()=>{
						that.msg = ''
						that.show = false
					},1500)
				}				
			},
		}
	}
</script>
<style scoped>
	h1{
		width: 90%;	
		margin:0 auto;
	}
	.gengxin{
		position: fixed;
		top: 50%;
		left: 50%;
		width: 50%;
		height: 26%;
		margin-left: -20%;
		margin-top: -13%;
		background-color: #37BDEA;
		border-radius: 10px;
	}
	.item-box{
		width: 90%;
		padding: 20px 0;
		margin:0 auto;
		background-color: #e9eaec;
		border-radius: 5px;
		margin-top: 10px;
	}
	.item-title{
		display: block;
		font-size: 18px;
	    color: #333;
		font-weight: normal;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		text-decoration: none;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		background-color: #06A3D7
	}
	.btn{
		height: 35px;
	    color: #fff;
	    padding: 0 10px;
	    border: 0;
	    border-radius: 5px;
		background-color: #2d8cf0;
		border: 1px solid #2d8cf0;
	    box-sizing: border-box;
	    outline: none;
	    margin-top: 10px;
	    margin-right: 10px;
	}
	.btn.detail{
	    background-color: #ed3f14;
	    border: 1px solid #ed3f14;
	}
	.btn:hover{
		background-color: #57a3f3;
		border-color: #57a3f3;
	}
	.btn.detail:hover{
	    background-color: #f16543;
	    border-color: #f16543;
	}
	    li{
      list-style:none;
    }
    a{
      text-decoration:none;
    }
    .pagination {
        position: relative;

      }
      .pagination li{
        display: inline-block;
        margin:0 5px;
      }
      .pagination li a{
        padding:.5rem 1rem;
        display:inline-block;
        border:1px solid #ddd;
        background:#fff;

        color:#0E90D2;
      }
      .pagination li a:hover{
        background:#eee;
      }
      .pagination li.active a{
        background:#0E90D2;
        color:#fff;
      }
	.ipt{
		background-color: transparent;
		border: 0;
		width: 70%;
		height: 30px;
		border-radius: 30px;
		border: 1px solid rgba(19, 21, 25, 0.3);
		outline: none;
		margin-top: 10px;
		text-indent: 10px;
		color: #ff6700;
	}
	.ipt:focus{
		border: 1px solid red;
	}
	.date-picker{
		width: 70%;
	}
	.msg{
		width: 100%;
		position: fixed;
		left: 0;
		top: 50%;
		background-color: #ff6700;
	}
	.msg.succ{
		color: #fff;
		background-color: #19be6b
	}
</style>